<template>
  <div class="app-container">
    <div class="right">
      <el-button type="primary" @click="goAdd()">添加</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在加载..."
      border
      fit
      highlight-current-row
    >
       <el-table-column label="封面图"  align="center">
        <template slot-scope="scope">
          <div class="Img">
            <img :src="scope.row.coverImage" alt="">
          </div>
        </template>
      </el-table-column>
       <el-table-column prop="id" align="center" label="ID"/>
      <el-table-column prop="mobile" align="center" label="账号"/>
      <el-table-column prop="name" label="姓名"  align="center"/>
      <el-table-column label="金额" align="center">
        <template slot-scope="scope">
          <span>{{changeMoney(scope.row.price)}}</span>
        </template>
      </el-table-column>
       <el-table-column label="联系人姓名" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.contactName">{{scope.row.contactName}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="联系人电话" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.contactMobile">{{scope.row.contactMobile}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button  @click="goDetail(scope.row.id)" type="primary">查看</el-button>
          <el-button style="background-color:#be1a21;border:#be1a21" @click="dele(scope.row)" type="primary">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   <pagination @fetchData="fetchData" :total="total"/>
  </div>
</template>

<script>
import { list,del} from '@/api/manager'
import { getToken } from '@/utils/auth'
import {showDecimal} from '@/utils'
import pagination from '@/components/Pagination/index'
export default {
  data() {
    return {
      total:0,
      list: null,
      listLoading: true
    }
  },
  components:{
    pagination
  },
  created() {
    this.fetchData({limit:10,page:0})
  },
  methods: {
     dele(row) {
        this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              del({targetId:row.id,token:getToken()}).then((json) => {
                if(json.status === 200){
                    this.fetchData({limit:10,page:0})
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    goAdd(){
      this.$router.push({name:'addDev'})
    },
    changeMoney(money){
      return showDecimal(money)
    },
    //前往添加开发商
    goDetail(id){
      this.$router.push({name:'detail',query:{managerId:id}})
    },
    fetchData(data) {
      this.listLoading = true
      list({limit:data.limit,page:data.page,token:getToken()}).then(res => {
        this.total=res.total
        let test=[];
        for(let item of res.data){
          if(item.mobile!="admin"){
            test.push(item)
          }
        }
        this.list = test
      }).finally(()=>{
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.limit=val
      this.fetchData()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page=val-1
      this.fetchData()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.Img{
  width:50px;
  height: 50px;
  margin: 0 auto;
  img{
    width:100%;
    height:100%;
  }
}
</style>
